<template>
    <div class="main_container" ref="mainContainerRef">
        <div v-if="isStartRender">
            <el-card class="table_head_card">
                <div class="table_head_container" ref="tableHeadContainerNode">
                    <div class="table_head flex_box border_bottom">
                        <div
                            class="index_item border_right border_box"
                            ref="indexNode"
                            :style="{ width: `${indexNodeWith}px` }"
                        ></div>
                        <div
                            class="table_item table_border table_head_hover"
                            v-for="(item, index) in tableTitles"
                            :key="index"
                            :ref="`table_head_${index}`"
                        >
                            <div
                                class="table_item_txt height_100"
                                :style="{ display: 'block' }"
                            >
                                <div class="arrow_icon_box">
                                    <span>{{ item }}</span>
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                                <!-- 点击态 -->
                                <div
                                    v-if="headTableInfo.headItemNodes.length"
                                    :class="[
                                        'hover_state',
                                        activeHeadIndex === index &&
                                            'active_head',
                                    ]"
                                    :style="{
                                        width: `${headTableInfo.titleWidthList[index]}px`,
                                        left: `${headTableInfo.headItemNodes[index].offsetLeft}px`,
                                    }"
                                    @click.prevent.stop="
                                        openFormModel(
                                            $refs[`table_head_${index}`][0],
                                            item,
                                            index
                                        )
                                    "
                                ></div>
                            </div>
                        </div>
                    </div>
                    <div class="table_desc flex_box overflow_hidden border_box">
                        <div
                            class="flex_box flex_right flex_align_center padding_lr20 border_box overflow_hidden table_border desc_txt_color"
                            :style="{
                                width: `${
                                    headTableInfo.indexWith +
                                    headTableInfo.titleWidthList[0]
                                }px`,
                            }"
                        >
                            <span>总数12</span>
                        </div>
                        <div
                            class="table_desc_control flex_box border_box overflow_hidden"
                        >
                            <div
                                v-for="(
                                    subItem, subIndex
                                ) in headTableInfo.titleWidthList.slice(1)"
                                :key="subIndex"
                                :ref="`table_desc_item_${subIndex}`"
                                :class="[
                                    'table_sub_head',
                                    'table_border',
                                    'table_desc_item',
                                    'desc_txt_color',
                                ]"
                                :style="{
                                    width: `${subItem}px`,
                                }"
                                @click.prevent.stop="
                                    openMenuModel(
                                        $refs[`table_desc_item_${subIndex}`][0],
                                        {
                                            active: 1,
                                        }
                                    )
                                "
                            >
                                <!-- <div v-if="subIndex === 0" class="text_right">
                        {{ tableTitles[subIndex] }}
                    </div> -->
                                <!-- <div>{{ tableTitles[subIndex] }}</div> -->
                                <div class="arrow_icon_box">
                                    <div
                                        v-if="tableSubTitltes[subIndex].isFixed"
                                    >
                                        {{ tableSubTitltes[subIndex].title }}
                                    </div>
                                    <div v-else class="table_desc_item_display">
                                        {{ tableSubTitltes[subIndex].title }}
                                    </div>
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 子项卡牌 -->
            <TableCard
                :tableCardList="tableCardList"
                :headTableInfo="headTableInfo"
                :tableHeadItemList="tableSubTitltes"
                @openFormModel="openFormModel"
                @openMenuModel="openMenuModel"
                @addTableRow="addTableRow"
            ></TableCard>
            <!-- 表单弹框 -->
            <div
                class="form_dialog"
                ref="formDialogRef"
                v-show="isShowFormModel"
                :style="{ left: formDialogData.left, top: formDialogData.top }"
                @click.prevent.stop="$event.preventDefault = true"
            >
                <el-form ref="form" :model="formDialogData.data">
                    <el-form-item label="列标题">
                        <el-input v-model="formDialogData.data.name"></el-input>
                    </el-form-item>
                    <div class="text_right">
                        <el-button type="primary">提交</el-button>
                    </div>
                </el-form>
            </div>
            <!-- 菜单弹框 -->
            <div
                class="menu_dialog"
                v-show="isShowMenuModel"
                :style="{ left: menuDialogData.left, top: menuDialogData.top }"
                @click.prevent.stop="$event.preventDefault = true"
            >
                <div
                    class="menu_item"
                    v-for="(item, index) in menuList"
                    :key="item"
                >
                    <div class="active_icon"></div>
                    <div class="menu_txt">{{ item }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/*

1、点击其他地方弹框取消
2、子菜单弹窗
3、点击背景框

 */
import TableCard from "./components/tableSubCard.vue";
export default {
    components: {
        TableCard,
    },
    data() {
        return {
            indexNodeWith: 100,
            isStartRender: false,
            isShowCardCollapse: "1",
            isShowFormModel: false,
            isShowMenuModel: false,
            activeHeadIndex: -1,
            tableCardList: [
                { name: "前端", tableData: [[], [], [], []] },
                { name: "后端" },
                { name: "测试" },
            ],
            tableTitles: [
                "需求内容",
                "启动时间",
                "完成时间",
                "提测时间",
                "上线发布时间",
                "上线所天数",
                "开发进度",
                "开发负责人",
                "是否有延期风险",
            ],
            tableSubTitltes: [
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                    isFixed: true,
                },
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                },
                {
                    title: "数据统计",
                },
            ],
            menuList: [
                "不展示",
                "记录总数",
                "未填写",
                "已填写",
                "去重计数",
                "未填写占比",
            ],
            headTableInfo: {
                headItemNodes: [],
                containerWith: 0,
                cardTableWidth: 0, // 折叠表格宽度
                indexWith: 0,
                titleWidthList: [],
                titleAllWidth: 0,
            },
            //   表单
            formDialogData: {
                left: 0,
                top: 0,
                data: {},
            },
            menuDialogData: {
                left: 0,
                top: 0,
                data: {},
            },
        };
    },
    mounted() {
        let containerWidth =
            this.$refs.mainContainerRef.getBoundingClientRect().width;
        this.indexNodeWith = ((containerWidth - 100) % 9) + 100;
        this.isStartRender = true;
        let observeWidth = 0;
        const resizeObserver = new ResizeObserver((entries) => {
            let currentWidth = entries[0].contentRect.width;
            if (observeWidth != currentWidth) {
                setTimeout(() => this.init(), 0);
                observeWidth = currentWidth;
            }
        });
        this.$nextTick(() => {
            resizeObserver.observe(this.$refs["mainContainerRef"]);
        });
    },
    methods: {
        init() {
            console.log("初始化");
            this.countHeadeItemWidth();
            this.cannelClickEvent();
            this.$nextTick(() => {
                let { height } =
                    this.headTableInfo.headItemNodes[0].getBoundingClientRect();
                // this.countCardTableWidth();
                this.formDialogData.top = height + "px";
            });
        },
        countHeadeItemWidth() {
            let headItemList = Array.from(
                document.querySelectorAll(".table_item")
            );
            let indexItem = document.querySelector(".index_item");
            this.headTableInfo.headItemNodes = headItemList;
            this.headTableInfo.indexWith =
                indexItem.getBoundingClientRect().width;
            this.headTableInfo.titleAllWidth = 0;
            this.headTableInfo.titleWidthList = headItemList.reduce(
                (res, item) => {
                    let _width = item.getBoundingClientRect().width;
                    res.push(_width);
                    this.headTableInfo.titleAllWidth += _width;
                    return res;
                },
                []
            );
        },
        // countCardTableWidth() {
        //     let cardContentItem = document.querySelector(".card_content_item");
        //     this.headTableInfo.cardTableWidth =
        //         cardContentItem.getBoundingClientRect().width;
        //     console.log(this.headTableInfo.cardTableWidth, "1872");
        //     console.log(this.headTableInfo.titleAllWidth, "总厂");
        //     console.log(this.headTableInfo.titleWidthList, "总厂2");
        // },
        // 打开表单弹窗
        openFormModel(node, data, index) {
            // let node = this.$refs[refName][0];
            let dialogNode = this.$refs["formDialogRef"];
            let { width } = node.getBoundingClientRect();
            this.isShowFormModel = true;
            this.$nextTick(() => {
                let { width: dialogWidth } = dialogNode.getBoundingClientRect();
                this.formDialogData.data = { name: data };
                let currentLeft =
                    dialogWidth + node.offsetLeft > window.innerWidth
                        ? node.offsetLeft - (dialogWidth - width)
                        : node.offsetLeft;

                this.formDialogData.left = currentLeft + "px";
                this.activeHeadIndex = index;
            });
            this.isShowMenuModel && (this.isShowMenuModel = false);
        },
        // 打开菜单弹窗
        openMenuModel(node, data) {
            let { height } = node.getBoundingClientRect();
            let { offsetLeft, offsetTop } = node;
            this.menuDialogData.data = data;
            this.menuDialogData.left = offsetLeft + "px";
            this.menuDialogData.top = offsetTop + height + "px";
            this.isShowMenuModel = true;
            this.isShowFormModel && (this.isShowFormModel = false);
            this.activeHeadIndex !== -1 && (this.activeHeadIndex = -1);
        },
        // 点击其他区域关闭弹窗
        cannelClickEvent() {
            document.onclick = () => {
                this.isShowFormModel && (this.isShowFormModel = false);
                this.isShowMenuModel && (this.isShowMenuModel = false);
                this.activeHeadIndex !== -1 && (this.activeHeadIndex = -1);
            };
        },
        addTableRow(tableIndex, Row) {
            let currentTable = this.tableCardList[tableIndex];
            !currentTable.tableData && (currentTable.tableData = []);
            currentTable.tableData.push(Row);
            this.$set(this.tableCardList, tableIndex, currentTable);
        },
    },
};
</script>
<style scoped>
.main_container {
    position: relative;
    min-height: 100%;
}
.table_head {
}
.index_item {
    padding: 10px 20px;
    min-width: 100px;
}
.table_sub_head {
    /* padding: 10px 20px; */
    box-sizing: border-box;
}
.table_item {
    /* position: relative; */
    /* padding: 10px 20px; */
    flex: 1;
    align-items: center;
}
.table_border {
    border-right: 1px solid var(--border-color);
    /* border-left: 1px solid #999; */
    box-sizing: border-box;
}
.table_item_txt {
    /* padding: 10px 20px; */
    /* position: absolute;
  left: 0;
  top: 0; */
    /* width: 100%; */
    /* height: 100%;
  background-color: #777; */
    box-sizing: border-box;
}
/* 头部 */
.hover_state {
    position: absolute;
    display: none;
    /* left: 0; */
    top: 0;
    /* width: 100%; */
    height: 100%;
    background-color: rgba(100, 100, 100, 0.3);
}
.active_head {
    display: block;
    background: rgb(40 53 157 / 50%);
}
.table_item:hover .hover_state {
    display: block;
}
.space_txt {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}
.desc_txt_color {
    color: var(--desc-text-color);
}
/* 子卡片 */
.card_item_content {
    box-sizing: border-box;
}
/* 表格 */
.card_content_item {
    width: 100%;
}
.table_card_control {
    overflow: hidden;
}
.table_row {
    border-bottom: 1px solid var(--border-color);
}
.table_col {
    padding: 10px 20px;
    box-sizing: border-box;
    border-right: 1px solid var(--border-color);
}
.table_col:last-child {
    border: none;
}
.card_content_item .table_sub_head {
    padding: 0;
}
.card_content_item .table_sub_head.table_card_item {
    padding: 0 20px;
}

/* 控制表头菜单 */
.table_desc {
    height: 41px;
}
.table_card_item_display {
    display: none;
}
.table_item_display {
    display: none;
}

.table_desc_item_display {
    display: none;
}

.table_card_control:hover .table_card_item_display {
    display: block;
}
.table_item_control:hover .table_item_display {
    display: block;
}
.table_desc_control:hover .table_desc_item_display {
    display: block;
}
.table_desc_item:hover {
    background-color: rgba(206, 206, 206, 0.3);
}
.table_item_menu:hover {
    background-color: rgba(206, 206, 206, 0.3);
}
.card_head_item:hover {
    background-color: rgba(206, 206, 206, 0.3);
}

/* 弹框 */
.form_dialog {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 20px;
    width: 300px;
    min-height: 300px;
    box-shadow: -4px 1px 12px 0px #a59696;
    background: #fff;

    box-sizing: border-box;
    border-radius: 10px;
}
/* 菜单弹框 */
.menu_dialog {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    width: 200px;
    min-height: 300px;
    box-shadow: -4px 1px 12px 0px #a59696;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}
.menu_item {
    display: flex;
    line-height: 1.8;
}
.arrow_icon_box {
    position: relative;
    padding: 10px 20px;
    height: 100%;
    box-sizing: border-box;
}
.arrow_icon_box .el-icon-arrow-down {
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}
.arrow_icon_box:hover .el-icon-arrow-down,
.table_head_hover:hover .el-icon-arrow-down {
    display: block;
}

/* .arrow_icon_box::after {
    content: "\E6E0";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
} */

/* 覆盖样式 */
>>> .el-card {
    border: none;
}
>>> .card_item_content .el-card__body {
    padding: 0;
}
>>> .table_head_card .el-card__body {
    padding: 0;
}

>>> .table_sub_card .el-card__body {
    padding: 0;
}
>>> .card_item_content .el-collapse-item {
    padding: 0 0 20px 20px;
}
>>> .el-card .el-collapse-item__arrow {
    /* display: none; */
}
>>> .el-collapse-item__header {
    border-bottom: none;
}
</style>
